<template>
  <div class="ta-all">
  <div class="l-ta1">
      <div class="l-ta1-1">塔吊监测</div>
      <div class="l-ta1-2">
        <div class="l-ta1-2-1">
          <div class="l-ta1-2-1-img">
            <img src="../../static/TaDiao-img/head1.png" alt="" />
          </div>
          <div class="l-ta1-2-1-zi">塔吊总数:</div>
          <div class="l-ta1-2-1-num">5</div>
        </div>
        <div class="l-ta1-2-1">
          <div class="l-ta1-2-1-img">
            <img src="../../static/TaDiao-img/head2.png" alt="" />
          </div>
          <div class="l-ta1-2-1-zi">运行总数:</div>
          <div class="l-ta1-2-1-num">3</div>
        </div>
        <div class="l-ta1-2-1">
          <div class="l-ta1-2-1-img">
            <img src="../../static/TaDiao-img/head3.png" alt="" />
          </div>
          <div class="l-ta1-2-1-zi">塔吊报警总数:</div>
          <div class="l-ta1-2-1-num">25</div>
        </div>
        <div class="l-ta1-2-4">
          <div class="l-ta1-2-1-img">
            <img src="../../static/TaDiao-img/head3.png" alt="" />
          </div>
          <div class="l-ta1-2-1-zi">报警处理总数:</div>
          <div class="l-ta1-2-1-num">15</div>
        </div>
      </div>
    </div>
    <div class="l-ta2">
      <div class="l-ta2-1">
        <div class="l-ta2-1-left">塔吊设备</div>
        <div></div>
      </div>
      <div class="l-ta2-2">
        <div class="l-ta2-2-left">
          <div class="l-ta2-2-left-1">
            <div class="l-ta2-2-left-1-left">实时监控数值</div>
            <div class="l-ta2-2-left-1-right">
              <div class="l-ta2-2-left-1-right-1">接收时间:</div>
              <div class="l-ta2-2-left-1-right-2">2020-10-19 15:06:20</div>
            </div>
          </div>
          <div class="l-ta2-2-left-2">
            <div class="l-ta2-2-left-2-1">
              <div class="l-num1">
                <div class="l-num1-left">
                  <img src="../../static/TaDiao-img/icon1.png" alt="" />
                </div>
                <div class="l-num1-right">
                  <div class="l-num1-right-1">{{ arr.tower_height }}M</div>
                  <div class="l-num1-right-2">塔身高度</div>
                </div>
              </div>
              <div class="l-num1">
                <div class="l-num1-left">
                  <img src="../../static/TaDiao-img/icon2.png" alt="" />
                </div>
                <div class="l-num1-right">
                  <div class="l-num1-right-1">{{ arr.tower_torque }}%</div>
                  <div class="l-num1-right-2">力矩比</div>
                </div>
              </div>
              <div class="l-num1">
                <div class="l-num1-left">
                  <img src="../../static/TaDiao-img/icon3.png" alt="" />
                </div>
                <div class="l-num1-right">
                  <div class="l-num1-right-1">{{ arr1.weather_wind }}M/S</div>
                  <div class="l-num1-right-2">风速</div>
                </div>
              </div>
              <div class="l-num1">
                <div class="l-num1-left">
                  <img src="../../static/TaDiao-img/icon4.png" alt="" />
                </div>
                <div class="l-num1-right">
                  <div class="l-num1-right-1">
                    {{ arr.tower_forearm }}M/{{ arr.tower_afterwrap }}M
                  </div>
                  <div class="l-num1-right-2">前臂/后臂</div>
                </div>
              </div>
              <div class="l-num1">
                <div class="l-num1-left">
                  <img src="../../static/TaDiao-img/icon5.png" alt="" />
                </div>
                <div class="l-num1-right">
                  <div class="l-num1-right-1">{{ arr.tower_turn }}°</div>
                  <div class="l-num1-right-2">回转</div>
                </div>
              </div>
            </div>
            <div class="l-ta2-2-left-2-2">
              <div class="l-num1">
                <div class="l-num1-left">
                  <img src="../../static/TaDiao-img/icon6.png" alt="" />
                </div>
                <div class="l-num1-right">
                  <div class="l-num1-right-1">{{ arr.tower_vertical }}°</div>
                  <div class="l-num1-right-2">垂直倾角</div>
                </div>
              </div>
              <div class="l-num1">
                <div class="l-num1-left">
                  <img src="../../static/TaDiao-img/icon7.png" alt="" />
                </div>
                <div class="l-num1-right">
                  <div class="l-num1-right-1">{{ arr.tower_hoisting }}K</div>
                  <div class="l-num1-right-2">吊重</div>
                </div>
              </div>
              <div class="l-num1">
                <div class="l-num1-left">
                  <img src="../../static/TaDiao-img/icon8.png" alt="" />
                </div>
                <div class="l-num1-right">
                  <div class="l-num1-right-1">{{ arr.tower_range }}M</div>
                  <div class="l-num1-right-2">小车幅度</div>
                </div>
              </div>
              <div class="l-num1">
                <div class="l-num1-left">
                  <img src="../../static/TaDiao-img/icon9.png" alt="" />
                </div>
                <div class="l-num1-right">
                  <div class="l-num1-right-1">{{ arr.tower_mitre }}°</div>
                  <div class="l-num1-right-2">水平倾角</div>
                </div>
              </div>
              <div class="l-num1">
                <div class="l-num1-left">
                  <img src="../../static/TaDiao-img/icon10.png" alt="" />
                </div>
                <div class="l-num1-right">
                  <div class="l-num1-right-1">{{ arr.tower_hook }}M</div>
                  <div class="l-num1-right-2">吊钩高度</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="l-ta2-2-right">
          <div class="f-adiv1-zi">实时天气情况</div>
          <div class="tian">
            <div id="weather-v2-plugin-simple"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="l-ta3">
      <div class="l-ta3-left">
        <div class="td-view">
          <div class="l-ta2-2-left-1">
            <div class="l-ta2-2-left-1-left">塔吊视图</div>
          </div>
          <div class="td-view1">
            <div class="td-view1-1">
              <img src="../../static/TaDiao-img/ta.png" alt="" />
            </div>
            <div class="td-view1-2">
              <div class="td-view1-2-1">
                <img src="../../static/TaDiao-img/zheng.png" alt="" />
              </div>
              <div class="td-view1-2-2">当前角度：0°</div>
            </div>
            <div class="td-view1-3">
              <div class="td-view1-3-1">设备开机时间</div>
              <div class="td-view1-3-2">2020-10-19 15:03:20</div>
              <div class="td-view1-3-3">安全施工天数</div>
              <div class="td-view1-3-4">
                设备安全施工 <span class="zero">94</span> 天
              </div>
            </div>
          </div>
        </div>
        <div class="yujing">
          <div class="l-ta2-2-left-1">
            <div class="l-ta2-2-left-1-left">设备预警趋势</div>
          </div>
          <div class="chart1">
            <ve-line :data="chartData" :settings="chartSettings"></ve-line>
          </div>
        </div>
      </div>
      <div class="l-ta3-right">
        <h3 class="h3">塔吊基本信息</h3>
        <div class="l-list">
          <div class="l-list-1">塔吊名称：塔式起重机</div>
          <div class="l-list-1">塔吊编号：TC7525-16D</div>
          <div class="l-list-1">安装时间：2020-08-23 07:57:28</div>
          <div class="l-list-1">安装位置：1号楼</div>
          <!-- <div class="l-list-left" v-for="(item, index) in items" :key="index">> -->
        </div>
        <div class="biao2">
          <h3 class="h3">本月报警类型统计</h3>
            <ve-ring :data="chartData1"></ve-ring>
      </div>
      </div>
      <!-- <div  -->
      <div></div>
    </div>
    <div class="l-ta4">
      <div class="l-ta4-1">
        <div class="l-ta4-1-left">报警历史</div>
        <div class="l-ta4-1-right">
          <!-- <el-form-item prop="people_give"> -->
          <div>状态</div>
          <div>
            <el-select v-model="ruleForm.alarminfo_status" placeholder="请选择">
              <el-option
                v-for="item in options1"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
          <div>
            <el-button type="primary" @click="search()">搜索</el-button>
          </div>
      </div>
      </div>
      <div class="l-ta4-2">
        <el-table
          ref="singleTable"
          :data="currList"
          highlight-current-row
          @current-change="handleCurrentChange"
          :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
          style="width: 100%"
        >
          <el-table-column align="center" type="index"></el-table-column>
          <el-table-column
            align="center"
            property="alarminfo_start"
            label="报警时间"
          ></el-table-column>
          <el-table-column
            align="center"
            property="alarminfo_deal"
            label="处理时间"
            width="120"
          ></el-table-column>
          <el-table-column
            align="center"
            property="equipment_name"
            label="设备名称"
          ></el-table-column>
          <el-table-column
            align="center"
            property="alarminfo_text"
            label="报警原因"
          ></el-table-column>
          <el-table-column
            align="center"
            property="alarminfo_status"
            label="状态"
          >
          
           <template slot-scope="scope">
              <!-- <span v-text="scope.row.admin_lastloginstate=='0'?'启用':'禁用'"></span> -->
              <span  style="color:red"  v-if="scope.row.alarminfo_status=='0'">未处理</span>
              <span  style="color:green" v-else>已处理</span>
            </template>
          </el-table-column>
        </el-table>
         <div class="l-fen">
        <div class="f-fenye">
              <el-pagination
                background
                layout="prev, pager, next"
                :total="tableData.length"
                :page-size="pageSize"
                @current-change="changePage"
              ></el-pagination>
            </div>
            </div>
      </div>
    </div>
  </div>
  <!-- </div> -->
  <!-- </div> -->
</template>
<script>
import http from "../api";
// import DescriptionItem from '../pages/TianQi'
export default {
  data () {
    // 当月设备预警趋势 曲线图
    this.chartSettings = {
        metrics: ['日期', '次数'],
        dimension: ['日期']
      }
  return {
       timer:null, //定时器名称
      options1: [
        {
          value: 0,
          label: "待处理",
        },
        {
          value: 1,
          label: "已处理",
        },
      ],

      tableData: [], //总条数
      currPage: 1, //当前页
      currList: [], //当前展示的数据数组
      pageSize: 6,
      arr: {},
      arr1: {},
      arr2: {},
      chart1:[],
       chart2:[],
      ruleForm: {
       "alarminfo_status":"",
      "equipment_type_id": 2, 
      },
      //曲线图
           chartData: {
          columns: ['日期', '次数'],
          rows: [
          { 日期: "1月", 次数: 1393},
          { 日期: "2月", 次数: 3530 },
          { 日期: "3月", 次数: 1723},
          { 日期: "4月", 次数: 3792 },
          { 日期: "5月", 次数: 4593},
          { 日期: "6月", 次数: 1393},
          { 日期: "7月", 次数: 3530 },
          { 日期: "8月", 次数: 1723},
          { 日期: "9月", 次数: 3792 },
          { 日期: "10月", 次数: 4593},
          { 日期: "11月", 次数: 3792},
          { 日期: "12月", 次数: 4593},
          ]
        },
      //图表图
   chartData1: {
        columns: ["报警类型", "故障个数"],
        rows: [
          { 报警类型: "采集器故障", 故障个数: 1393},
          { 报警类型: "风速传感器故障", 故障个数: 1393},
          { 报警类型: "高度传感器故障", 故障个数: 1393},
           { 报警类型: "交流电断电故障", 故障个数: 3530},
          { 报警类型: "称重传感器故障", 故障个数: 1393},
          { 报警类型: "回转传感器故障", 故障个数: 1393},
          { 报警类型: "识别传感器故障", 故障个数: 2923},
         { 报警类型: "塔群报警器故障", 故障个数: 1393},
          { 报警类型: "幅度传感器故障", 故障个数: 2923},
         
        ],
      },
    };
  },
  // components:{
  //     DescriptionItem,
  // }

  methods: {
    queryInfo(){

  // 除风速
    http.TaDiao({ equipment_id: 1 }).then((res) => {
      this.arr = res.data;
      console.log("塔吊", res);
    });
    // 风速
    http.TaDiaoweater({}).then((res) => {
      this.arr1 = res;
      console.log("风速", res);
    });

   },

      // 改变当前页改变当前页展示
    setCurrList(index) {
      this.currList = this.tableData.slice(
        (index - 1) * this.pageSize,
        index * this.pageSize
      );
    },
    // 改变当前页
    changePage(val) {
      this.currPage = val;
      this.setCurrList(val);

      console.log(val);
    },
    del() {},
    handleCurrentChange(val) {
      this.currentRow = val;
    },
    search() {
      console.log("aaa", this.ruleForm);
      http.TaDiaobiao(this.ruleForm).then((res) => {
        this.tableData = res.data;
        this.setCurrList(1);
        console.log("塔吊表格查询1", res);
      });
     
    },
  },

  mounted() {
        http.TaDiaobiao1({}).then((res) => {
      this.chart1=res;
      for (let i = 0; i <this.chartData.rows.length; i++) {
           this.chartData.rows[i].次数=this.chart1[i]
                }
      console.log("塔吊图表1", res);
    });
     http.TaDiaobiao2({}).then((res) => {
         this.chart2=res;
      for (let i = 0; i <this.chartData1.rows.length; i++) {
           this.chartData1.rows[i].故障个数=this.chart1[i]
                }
      console.log("塔吊图表2", res);
    });
    http.TaDiaobiao({ equipment_type_id: 2 }).then((res) => {
      this.tableData = res.data;
       this.setCurrList(1);
      console.log("塔吊表格", res);
    });
  this.queryInfo();
   this.timer = setInterval(() => {
       setTimeout(this.queryInfo, 0)
   }, 1000*5)
 
// http.TaDiaobiao2

  
    http.TaDiaoleft({ equipment_id: 1 }).then((res) => {
      console.log("塔吊右", res.data);
      this.arr2 = res;
    });
    // 天气
    (window.WIDGET = {
      CONFIG: {
        modules: "01234",
        background: 1,
        tmpColor: "FFFFFF",
        tmpSize: 20,
        cityColor: "FFFFFF",
        citySize: 16,
        aqiSize: 16,
        weatherIconSize: 24,
        alertIconSize: 18,
        padding: "40px 40px 40px 40px",
        shadow: "1",
        language: "auto",
        borderRadius: 5,
        fixed: "false",
        vertical: "middle",
        horizontal: "center",
        key: "GhxyemyMgV",
        backgroundColor: "black",
      },
    }),
      (function (d) {
        var c = d.createElement("link");
        c.rel = "stylesheet";
        c.href =
          "https://apip.weatherdt.com/simple/static/css/weather-simple.css?v=2.0";
        var s = d.createElement("script");
        s.src =
          "https://apip.weatherdt.com/simple/static/js/weather-simple.js?v=2.0";
        var sn = d.getElementsByTagName("script")[0];
        sn.parentNode.insertBefore(c, sn);
        sn.parentNode.insertBefore(s, sn);
      })(document);
    console.log(WIDGET);
  },
  
beforeDestroy(){
   clearInterval(this.timer);        
   this.timer = null;
}
  };
</script>
<style scoped>
.el-select >>> .el-input__inner {
  height: 30px;
  padding-left: 5px;
  /* margin-left: 5px; */
}
.el-input >>> .el-input__icon {
  height: 30px;
  line-height: 30px;
}
/* .el-input >>> .el-input__inner {
  width: 178px;
  height: 30px;
  /* padding-left: 5px; */
/* margin-left: 5px; */
/* }  */
.el-button {
  height: 30px;
  padding: 8px 15px;
}
.l-list{
  font-size: 17px;
}
.ve-ring{
  margin-top: 20px;
}
.biao2 {
  width: 100%;
  height: 400px;
  margin-top: 40px;
}
.chart1 {
  width: 100%;
  height: 400px;
  background: white;
}
.ta-all {
  width: 100%;
  height: 645px;
  /* background: ; */
  overflow-y: scroll;
}
/* 天气 */
.tian {
  width: 93%;
  margin-left: 15px;
  position: relative;
  z-index: 1;
  /* width: 50px; */
  /* height: 100px; */
  /* width: 200px; */
  margin-top: 20px;
}
#weather-v2-plugin-simple {
  background-color: black;
}
.s-sticker {
  background-color: black;
}
.l-ta1 {
  width: 99%;
  height: 140px;
  background: white;
  margin-top: 10px;
}
.l-ta1-1 {
  font-size: 17px;
  color: #222;
  font-weight: 700;
  padding: 18px 20px 18px 20px;
}
.l-ta1-2 {
  width: 95%;
  height: 56px;
  background: #f2f2f2;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.l-ta1-2-1 {
  width: 150px;
  height: 26px;
  margin-left: 10px;
  /* background: violet; */
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.l-ta1-2-4 {
  width: 140px;
  height: 26px;
  margin-left: 10px;
  margin-right: 10px;
  /* background: violet; */
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.l-ta1-2-1-zi {
  font-size: 15px;
  height: 22px;
  line-height: 22px;
}
.l-ta1-2-1-num {
 
  font-size: 14px;
  height: 22px;
  line-height: 22px;
  font-weight: 700;
  height: 22px;
  color: rgba(0, 0, 0, 0.65);
}
/* 2 */
.l-ta2 {
  width: 99%;
  height: 260px;
  background: white;
  margin-top: 10px;
}
.l-ta2-1 {
  height: 44px;
  border-bottom: 1px solid gainsboro;
  /* background: red; */
}
.l-ta4-1 {
  height: 44px;
  border-bottom: 1px solid gainsboro;
  display: flex;
  justify-content: space-between;
  /* background: red; */
}
.l-ta2-1-left {
  padding-left: 20px;
  width: 130px;
  height: 44px;
  line-height: 44px;
  color: #1890ff;
  font-weight: 500;
  border-bottom: 3px solid#1890ff;
}
.l-ta4-1-left {
  padding-left: 20px;
  width: 100px;
  height: 44px;
  line-height: 44px;
  color: #1890ff;
  font-weight: 500;
  border-bottom: 3px solid#1890ff;
}
.l-ta4-2{
  width: 98%;
 
  margin: 0 auto;
   margin-top: 10px;
}
.l-ta2-2 {
  width: 100%;
  height: 220px;
  background: white;
  display: flex;
}
.l-ta2-2 img {
  width: 30px;
  height: 30px;
}
.l-ta2-2-left {
  width: 70%;
  height: 220px;
  /* background: violet; */
}
.l-ta2-2-left-1 {
  width: 90%;
  height: 40px;
  background: white;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.l-ta2-2-left-1-right {
  display: flex;
  justify-content: space-between;
}
.l-ta2-2-left-1-right-1 {
  margin-right: 10px;
}
.l-ta2-2-left-1-left {
  font-weight: 600;
  font-size: 15px;
  color: rgba(0, 0, 0, 0.85);
}
.l-ta2-2-left-2 {
  width: 90%;
  height: 180px;
  /* background: gold; */
  margin: 0 auto;
}
.l-ta2-2-left-2-1 {
  display: flex;
}
.l-num1 {
  width: 20%;
  height: 70px;
  /* background: honeydew; */
  display: flex;
  /* justify-content: space-between; */
  justify-content: space-around;
  align-items: center;
  border-right: 1px solid gainsboro;
}
.l-num1-left {
}
.l-ta4-1-right {
  width: 320px;
  margin-right: 10px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.l-ta2-2-left-2-2 {
  display: flex;
}
.l-num1-right {
  align-items: center;
}
.l-num1-right-1 {
  color: rgba(0, 0, 0, 0.85);
  font-weight: 700;
  font-size: 17px;
  text-align: center;
}
.l-ta2-2-right {
  width: 30%;
  height: 210px;
  /* background: darkgoldenrod; */
}
/* .tianqi{
      font-size: 17px;
    font-weight: 600;
    margin-left: 15px;
    margin-top: 15px;
     /* margin-top: 30px; */

/* .tianqi1{

 } */
.f-adiv1-zi {
  font-size: 17px;
  font-weight: 600;
  margin-left: 15px;
  margin-top: 15px;
  /* overflow: hidden; */
}
.l-ta3 {
  width: 99%;
  height: 810px;
  /* background: pink; */
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}
.l-ta4 {
  width: 99%;
  /* height: 560px; */
  background:white;
  margin-top: 20px;
  /* display: flex; */
}
.l-ta3-left {
  width: 70%;
  height: 800px;
  /* background: yellow; */
}
.l-ta3-right {
  width: 28%;
  height: 810px;
  background: white;
}
.td-view {
  width: 100%;
  height: 360px;
  background: white;
}
.yujing {
  width: 100%;
  height: 360px;
  background: white;
  margin-top: 10px;
}
.td-view1 {
  width: 100%;
  height: 300px;
  /* background: yellow; */
  display: flex;
  justify-content: space-evenly;
}
.td-view1-1 {
  width: 320px;
  height: 300px;
  /* background: violet; */
}
.td-view1-1 img {
  width: 320px;
  height: 300px;
}
.td-view1-2 {
  width: 204px;
  height: 300px;
  /* background: violet; */
}
.td-view1-2-1 {
  width: 204px;
  height: 204px;
  background-image: url(../../static/TaDiao-img/jiaodu.png);
  background-repeat: no-repeat;
  background-size: cover;
}
.td-view1-2-1 {
  padding-left: 100px;
  padding-top: 78px;
}
.td-view1-2-1 img {
  width: 50px;
  height: 50px;
}
.td-view1-2-2 {
  width: 204px;
  text-align: center;
  margin-top: 15px;
  font-weight: 700;
  font-size: 15px;
  color: rgba(0, 0, 0, 0.65);
}

.td-view1-3 {
  width: 260px;
  height: 230px;
  background: #f0f2f5;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* justify-content: space-around; */
}
.td-view1-3-1 {
  color: rgba(0, 0, 0, 0.85);
  font-weight: 600;
  font-size: 14px;
  margin-top: 40px;
}
.l-num1-right-2 {
  width: 65px;
  height: 20px;
  text-align: center;
}
.td-view1-3-2 {
  width: 160px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background: #499fff;
  color: white;
  margin-top: 20px;
}
.td-view1-3-3 {
  color: rgba(0, 0, 0, 0.85);
  font-weight: 600;
  font-size: 14px;
  margin-top: 20px;
}

.zero {
  width: 20px;
  height: 20px;
  text-align: center;
  color: white;
  line-height: 20px;
  display: inline-block;
  background: #499fff;
}
.td-view1-3-4 {
  margin-top: 20px;
}
.h3 {
  font-weight: 700;
  margin-top: 10px;
  margin-left: 10px;
}
.l-list-1 {
  width: 80%;
  margin-left: 10px;
  margin-top: 5px;
}
.f-fenye {
  float: right;
  margin-top: 15px;
}
.l-fen{
  width: 100%;
  height: 60px;
  background: white;
}
</style>